/**
 * 格式说明: 属性名称==对应属性编辑器的组件配置
 */

interface EditorProps {
  required?: boolean
  // 占位符
  placeholder?: string
  // 提示信息
  tooltip?: string
}

interface EditorConfig {
  // 编辑器
  editor: string
  // 编辑器组件属性
  editorProps?: EditorProps
}

type PropType = {
  [key: string]: EditorConfig
}

/**
 * 表单属性
 */
const formProps = {
  layoutType: {
    editor: "select-editor",
    editorProps: {
      options: [
        { label: "水平", value: "horizontal" },
        { label: "垂直", value: "vertical" },
        { label: "单行", value: "inline" },
      ],
    },
  },
  wrapperCol: {
    editor: "col-editor",
    editorProps: {

    },
  },
}

/**
 * 公共属性
 */
const commonProps = {
  formItemField: { editor: "input-editor", editorProps: { required: true, tooltip: "表单中的唯一标识" } },
  formItemLabel: { editor: "input-editor", editorProps: {} },
  formItemLabelTooltip: { editor: "input-editor", editorProps: {} },
  wrapperCol: { editor: "col-editor", editorProps: {} },

  dictColProps: { editor: "col-editor", editorProps: { tooltip: "只有为多选框时才有效" } },
  readonly: { editor: "switch-editor", editorProps: {} },
  disabled: { editor: "switch-editor", editorProps: {} },
  defaultValue: { editor: "default-value-editor", editorProps: {} },
  placeholder: { editor: "input-editor", editorProps: {} },
  allowClear: { editor: "switch-editor", editorProps: {} },
  showSearch: { editor: "switch-editor", editorProps: {} },
  addonBefore: { editor: "input-editor", editorProps: {} },
  addonAfter: { editor: "input-editor", editorProps: {} },
  maxLength: { editor: "input-number-editor", editorProps: {} },
  bordered: { editor: "switch-editor", editorProps: {} },
  hidden: { editor: "switch-editor", editorProps: {} },
  rows: { editor: "input-number-editor", editorProps: {} },
  minRows: { editor: "input-number-editor", editorProps: {} },
  maxRows: { editor: "input-number-editor", editorProps: {} },
  autoSize: {
    editor: "switch-editor",
    editorProps: {
      tooltip: "如果设置了最小行数或最大行数, 则该选项无效",
    },
  },
  // 字典编码
  dictType: { editor: "input-editor" },
  // 字典组件类型
  dictCompType: {
    editor: "select-editor",
    editorProps: {
      options: [
        { label: "单选框", value: "radio" },
        { label: "单选按钮", value: "radioButton" },
        { label: "下拉框", value: "select" },
        { label: "多选框", value: "checkbox" },
      ],
    },
  },

  // 分割线方向
  direction: {
    editor: "select-editor",
    editorProps: {
      options: [
        { label: "左侧", value: "left" },
        { label: "中间", value: "center" },
        { label: "右侧", value: "right" },
      ],
    },
  },
  // 标题和最近 left/right 边框之间的距离
  directionMargin: {
    editor: "input-editor",
    editorProps: {
      tooltip: "标题和最近左侧/右侧边框之间的距离，去除了分割线，同时方向必须为左侧或右侧",
    },
  },
  // 是否为虚线
  dashed: { editor: "switch-editor" },
  // star 总数
  showCount: { editor: "input-editor" },
  // 是否允许半选
  allowHalf: { editor: "switch-editor" },
  // 自定义字符
  character: { editor: "input-editor" },
  // 输入框展示数量
  inputShowCount: { editor: "switch-editor" },
  // 展示图标
  showIcon: { editor: "switch-editor" },
  // 告警信息
  alertMessage: { editor: "input-editor" },

  alertType: {
    editor: "select-editor",
    editorProps: {
      options: [
        { label: "普通", value: "info" },
        { label: "警告", value: "warning" },
        { label: "成功", value: "success" },
        { label: "错误", value: "error" },
      ],
    },
  },
} as PropType

/**
 * 公共属性
 */
const validateProps = {
  formItemRequired: { editor: "switch-editor", editorProps: {} },
} as PropType

/**
 * 高级属性
 */
const advanceProps = {
  checkedText: { editor: "input-editor" },
  unCheckedText: { editor: "input-editor" },
} as PropType

/**
 * 样式相关属性
 */
const compStyleProps = {
  style: {
    editor: "style-editor",
    editorProps: { styleKeys: ["width"] },
  },

  divider_style: {
    editor: "style-editor",
    editorProps: {
      styleKeys: ["width", "paddingTop", "paddingBottom", "marginTop", "marginBottom"],
    },
  },

  rate_style: {
    editor: "style-editor",
    editorProps: { styleKeys: ["width", "fontSize"] },
  },

  alertStyle: {
    editor: "style-editor",
    editorProps: { styleKeys: ["width", "marginTop", "marginBottom"] },
  },
} as PropType

const formStyleProps = {
  labelStyle: { editor: "style-editor", editorProps: { styleKeys: ["width", "textAlign"] } },
} as PropType

/**
 * 属性类型type, comp: 组件属性, form: 表单属性
 */
const allProps = [
  { props: commonProps, type: "comp", tag: "基础属性" }, // 组件属性-基础
  { props: validateProps, type: "comp", tag: "验证配置" }, // 组件属性-校验
  { props: advanceProps, type: "comp", tag: "高级属性" }, // 组件属性-高级
  { props: compStyleProps, type: "comp", tag: "自定义样式" }, // 组件属性-样式
  { props: formProps, type: "form", tag: "基础属性" }, // 表单属性
  { props: formStyleProps, type: "form", tag: "自定义样式" }, // 表单属性
] as any[]

/**
 * 判断属性是否已注册
 * @param uniquePropName 属性名称（保证名称唯一，不跟其他组件属性冲突）
 */
export function propertyRegistered(uniquePropName) {
  for (const item of allProps) {
    if (!!item.props[uniquePropName]) {
      return true
    }
  }
  return false
}

/**
 * 对数据进行分组
 * key: type, value: allProps中的value
 */
export function propertyGroup(props, groupField) {
  const resp: any = {}
  for (const item of props) {
    if (resp[item[groupField]]) {
      resp[item.type]?.push(item)
    } else {
      const value: any[] = []
      value.push(item)
      resp[item[groupField]] = value
    }
  }
  return resp
}

export default allProps
